<template>

  <div class="common-layout">
    <el-container>
      <el-container>
        <el-header style="display: block;background-color:#fff" class="leadheade">
          <h4 :gutter="20">线索ID:XS45555</h4>
              <el-divider />
      
  <el-row :gutter="24" style="margin-top:30px;font-size:14px">
    <el-col :span="8">创建时间<div class="grid-content ep-bg-purple" />{{Followinformation.creatTime}}</el-col>
    <el-col :span="8">归属时间<div class="grid-content ep-bg-purple" />{{Followinformation.belongTime}}</el-col>
    <el-col :span="8">手机号<div class="grid-content ep-bg-purple" />{{Followinformation.phone}}</el-col>
  </el-row>
  <el-row :gutter="24" style="margin-top:30px;font-size:14px">
    <el-col :span="8">渠道来源<div class="grid-content ep-bg-purple" />{{Followinformation.sourceChannel}}</el-col>
    <el-col :span="8">线索分配<div class="grid-content ep-bg-purple" />{{Followinformation.distributor}}</el-col>
    <el-col :span="8">线索归属<div class="grid-content ep-bg-purple" />{{Followinformation.belonger}}</el-col>
  </el-row>
  <el-row :gutter="24" style="margin-top:30px;font-size:14px">
    <el-col :span="8">活动信息<div class="grid-content ep-bg-purple" />{{Followinformation.activityInformation}}</el-col>
  </el-row>
    </el-header>

      <el-main>
      <el-row :span="24">
      <el-col :span="12"><h4 :gutter="20">添加跟进</h4></el-col>
      <el-col :span="12" style="display: flex; justify-content: end">
      <el-button 
       type="primary" 
       size="large" 
       style="width:100x;background:#FD7065"
       class="searchbtn "
       @click="Spuriouscluebtn2"
       >伪线索</el-button
       >
       <el-button 
       type="info"
       plain
       size="large"
       style="width:100px"
       class="searchbtn"
       @click="opportunitybtn"
       >转商机</el-button>
       </el-col>
       <el-divider />
       </el-row>
       <el-form 
        ref="Newsearchform" 
        label-width="80px" 
        class="Followupform" 
        :model="NewsearchList"
        :rules="Addrules  ">
        <el-form-item label="客户姓名" prop="customerName" class="msg">
        <el-input placeholder="请输入" v-model="NewsearchList.customerName"></el-input>
        </el-form-item>

        <el-form-item label="性别"  style="width:600px;margin-left:30px;mragin-top:10px" prop="customerGender">
        <el-radio-group v-model="NewsearchList.customerGender">
        <el-radio label="男"></el-radio>
        <el-radio label="女"></el-radio>
        </el-radio-group>
        </el-form-item>

        <el-form-item label="年龄"  prop="customerAge">
        <el-input placeholder="请选择"  v-model="NewsearchList.customerAge"></el-input>
        </el-form-item>

        <el-form-item label="微信"  prop="wechatId">
        <el-input placeholder="请输入"  v-model="NewsearchList.wechatId"></el-input>
        </el-form-item>

        <el-form-item label="QQ"  prop="qqNumber">
        <el-input placeholder="请输入"  v-model="NewsearchList.qqNumber"></el-input>
        </el-form-item>

        <el-form-item label="意向等级" prop="grade" >
        <el-radio-group  v-model="NewsearchList.grade">
        <el-radio v-for="item in Intendeddiscipline" :key="item.id" :value="item.content" :label="item.content"></el-radio>

        </el-radio-group>
        </el-form-item>

        <el-form-item label="意向学科" style="width:100%"  prop="subjects">
        <el-select  placeholder="请选择渠道来源"  v-model="NewsearchList.subjects">
        <el-option v-for="item in disciplineintention" :key="item.id" :value="item.content"></el-option>
     
        </el-select>
        </el-form-item>

        <el-form-item label="跟进记录" style="width:100%"  prop="logs">
        <el-input type="textarea"
         placeholder="请输入" 
         maxlength="50" 
         show-word-limit
          v-model="NewsearchList.logs"
         ></el-input>
         </el-form-item>

         <el-form-item label="下次跟进日期"  prop="nextFollowTime"  class="msg2">
         <el-col :span="11">
         <el-date-picker type="date"
         label="Pick a date"
         placeholder="Pick a date" 
         v-model="NewsearchList.nextFollowTime"/>
         </el-col>
         </el-form-item>
   
        </el-form>
        <el-col :span="24" style="display: flex; justify-content: end">    <el-button 
        type="primary" 
        size="large" 
        style="width:80px;background:#05cc95"
        class="searchbtn "
        @click="Newsearch"
        >确定</el-button
        ></el-col>
        </el-main>
        </el-container>


       <div class="asideaa">
         <el-aside width="300px;height:100%" >
        <h4 :gutter="20">操作记录</h4>
        <el-divider />
        <el-space wrap>

         <el-card  style="width: 250px" class="card-header" v-for="item in Followupdata" :key="item.index" >
         <template #header>
         <div >
         <el-row :span="24" style="margin-top:10px">
         <el-col :span="12">意向等级</el-col>
         <el-col :span="8" style="color:#05CC95" >{{ item.grade}}</el-col>
         </el-row >
         <el-row :span="24" style="margin-top:10px">
         <el-col :span="12">意向学科</el-col>
         <el-col :span="8">{{ item.subjects}}</el-col>
         </el-row >
         <el-row :span="24" style="margin-top:10px">
         <el-col :span="12">下次跟进时间</el-col>
         <el-col :span="8">{{ item.nextFollowTime}}</el-col>
         </el-row >
         <span>跟进记录:</span>
         <el-col :span="24">{{item.logs}}</el-col>
       
         </div>
         </template>
         <div >
         <el-col :span="24">操作人:{{item.operator}}</el-col>
         <el-col :span="24">{{ item.creatTime}}</el-col>
         </div>
         </el-card>

        
        </el-space>
        </el-aside>
       </div>
        </el-container>
        </div>
        <!-- 伪线索弹窗 -->
        <el-dialog
          title="伪线索上报"
          v-model="Spuriouscluedialog"
          width=500px
          style=";height:600px">
        <el-divider />
        <el-form ref="form" 
         label-width="80px">
        <el-form-item label="原因" style="display:flex" prop="reasonsForReporting">
        <el-select  placeholder="请选择"  v-model="Falsecluesparams.reasonsForReporting">
        <el-option  v-for="item in Spuriouscluedata" :key="item.id" :value="item.content" />
        </el-select>
        </el-form-item>
     
        <el-form-item label="备注"  style="display:flex;margin-top:250px" class="remark" prop="remarkForReporting">
        <el-input type="textarea" 
        maxlength="50" 
        show-word-limit
        v-model="Falsecluesparams.remarkForReporting">
        </el-input>
        </el-form-item>

        </el-form>
              <div style="display: flex; justify-content: end">
        <el-button @click="dialogFormVisible=false" class="searchbtn" style="width:100px;height:40px"
          >取消</el-button
        >
        <el-button class="searchbtn green" type="primary" size="large" style="width: 100px" @click="Spuriouscluebtn">确定</el-button
        >
      </div>
      </el-dialog>
   <!-- 转商机弹窗 -->
      <el-dialog
      title=""
      v-model="opportunitydialog"
      style="width:400px;  text-align: center;">
   
      <span>确定转为客户</span>
      <div style="display: flex;justify-content: center">
      <el-button 
      @click="opportunitydialog=false" 
      class="searchbtn" 
      style="width:100px;height:40px">取消
      </el-button>

      <el-button 
       class="searchbtn green"
       type="primary" size="large" 
       style="width: 100px"
       @click="opportunityokay"
       >确定
       </el-button>
      </div>
      </el-dialog>
</template>

<script setup>
import { useRoute } from 'vue-router'
const route = useRoute()
import { onMounted, ref, } from 'vue'
import  {Followupcoll,addfollowup,SpuriousclueApi,Businessopportunity} from '@/api/home'
import {cxTabelCourse} from '@/api/course'
import { ElMessage } from 'element-plus'

// import dayjs from 'dayjs'   
//控制伪线索弹窗
const Spuriouscluedialog=ref(false)

//传参
const Falsecluesparams =ref({
  clueId:route.params.id ,
  reasonsForReporting:'',
  remarkForReporting:''
})
//发送请求
const Spuriouscluebtn2=async()=>{
Spuriouscluedialog.value=true
await  Falseleadreporting()



}
const Spuriouscluebtn=async()=>{
Spuriouscluedialog.value=false
await SpuriousclueApi(Falsecluesparams.value)

}

//控制转商机弹窗
const opportunitydialog=ref(false)
const opportunitybtn=async()=>{
  opportunitydialog.value=true
}

//点击确定发送转商机请求
const opportunityokay=async()=>{
  delete Falsecluesparams.value.reasonsForReporting
  delete Falsecluesparams.value.remarkForReporting
  await Businessopportunity(Falsecluesparams.value)

}

//回显数据
const Followupdata=ref([])

const Followinformation =ref({})
const getFollowupcoll=async()=>{
const {data}= await Followupcoll(route.params.id )
  Followinformation.value=data
  console.log( Followinformation.value);
  Followupdata.value =Followinformation.value.clueFollowList
  console.log( Followupdata.value );
}

//传参
const NewsearchList =ref({
  clueId:route.params.id ,
  customerName:'',
  customerGender:'',
  customerAge:'',
  wechatId:'',
  qqNumber:'',
  grade:'',
  subjects:'',
  logs:'',
  nextFollowTime:''
})


//表单校验
 const Addrules=({
      customerName: [{ required: true, message: '客户姓名不能为空', trigger: 'blur' }],
      grade: [{ required: true, message: '请选者意向等级', trigger: 'blur' },],
      subjects: [{ required: true, message: '意向学科不能为空', trigger: 'blur' }],
      nextFollowTime: [{ required: true, message: '下次跟进时间不能为空', trigger: 'blur' }],
  })

//新增跟进
const AddfollowupList =ref({})
const Newsearchform =ref(null)
const Newsearch=async()=>{
  try {
  await Newsearchform.value.validate()
   AddfollowupList.value =await addfollowup(NewsearchList.value)
   NewsearchList.value=''
 ElMessage.success('新增成功')
  }catch(error){
    ElMessage.error('请输入表单内容')
  }
 
}

//意向学科
const disciplineintention = ref([])
const discipline = async () => {
 const { data } = await cxTabelCourse(2)
 disciplineintention.value = data

}
//意向等级
const Intendeddiscipline =ref([])
const learnclass = async () => {
 const { data } = await cxTabelCourse(14)
 Intendeddiscipline.value = data

}


//伪线索上报原因
const Spuriouscluedata =ref([])
const Falseleadreporting = async () => {
 const { data } = await cxTabelCourse(3)
 Spuriouscluedata.value = data
 console.log(Spuriouscluedata.value);

}

  
 onMounted(()=>{
route.params.id && getFollowupcoll()
console.log(route.params.id);
discipline()
learnclass()
      })


</script>

<style scoped lang="less">

.asideaa{
::v-deep  .el-aside {  
    background-color:#fff !important;
      width: 260px;
  height:130vh;
  margin-left: 15px;

  }

}




::v-deep .el-main {
  padding: 0px !important;
  background-color: #fff;
}
.leadheade {
  height: 300px;
}

.leadheadetitle {
  margin-top: 25px;
}
.searchbtn{
    border-radius: 20px;
    margin-top: 20px;
}
  .el-input {
  width: 300px;
  border-radius: 7px;
  height: 20px;
  background-color: #fbfbfb;

}
 

  ::v-deep .el-input__wrapper {
  width: 300px;
  border-radius: 7px;
  height: 45px;
  background-color: #f5f5f5;
  
}
.el-form-item{
  display: block;
    margin-left:30px;
    margin-top:30px
}
.Followupform{
  display: flex;
  flex-wrap: wrap;
}
::v-deep .el-form-item__label {
  justify-content: flex-start !important;
  align-items: flex-start !important;
}
::v-deep .el-textarea__inner{
  height: 80px;
  background-color: #f2f2f2;

}
.card-header{
  font-size: 12px;
}
.remark{
  ::v-deep .el-textarea__inner{
  height: 80px;
  background-color: #f2f2f2;
  width: 345px;

}
}
.searchbtn {
  border-radius: 20px;

}
.green {
  background: #05cc95;
}
.msg{
 ::v-deep .el-form-item__error{
    top: 271%;
  }
}
.msg2{
 ::v-deep .el-form-item__error{
    top: 150%;

  }
}
</style>
